<template>
  <div>
    <a-tag v-for="tag in tagList" color="pink" :closable="false">{{tag}}</a-tag>
    <a-popover trigger="click" title="标签">
      <a-tag color="pink" v-if="moreTag" @click.stop>...</a-tag>
      <div slot="content" style="width:300px">
        <a-tag v-for="tag in allTag" color="pink" :closable="false">{{tag}}</a-tag>
      </div>
    </a-popover>
  </div>
</template>

<script>
  export default {
    name: "FileTags",
    props: ['tag'],
    data() {
      return {
        moreTag: false,
        allTag: []
      }
    },
    computed: {
      tagList() {
        if (this.tag) {
          //最多显示10个字的标签
          const arr = this.tag.split(" ");
          let wordNumber = 0;
          let list = [];
          arr.find((item, index) => {
            wordNumber += item.length;
            if (wordNumber > 6) {
              this.moreTag = true;
              this.allTag = arr;
              return true;
            }
            list.push(item);
          });
          return list;
        }
        return []
      }
    }
  }
</script>

<style scoped>

</style>